<template>
  <a-card class="body-container">
    <s-tool-bar>
      <template #left>
        <s-button v-if="authorize.insert" type="primary" icon="plus-outlined" @click="
          $refs.add.init((dialog) => {
            ; (itemFormValue = {}), dialog.open()
          })
          ">新增</s-button>
      </template>
      <template #right>
        <s-button type="dashed" shape="circle" icon="redo-outlined" @click="$refs.table.refresh()" />
      </template>
    </s-tool-bar>
    <s-tree-table ref="table" bordered :scroll="{ y: tableHeight }" :columns="columns" url="/realm/dept/selectList">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a v-if="authorize.insert" style="margin-right: 8px" @click="
            $refs.add.init((dialog) => {
              ; (itemFormValue = { parentId: record.id }), dialog.open()
            })
            ">
            <s-icon type="plus-outlined" />新增
          </a>
          <a v-if="authorize.selectOneById" style="margin-right: 8px" @click="detail(record.id, $refs.detail)">
            <s-icon type="eye-outlined" />查看
          </a>
          <a v-if="authorize.update" style="margin-right: 8px" @click="detail(record.id, $refs.update)">
            <s-icon type="edit-outlined" />编辑
          </a>
          <a-popconfirm v-if="authorize.delete" title="确认删除此条数据？" ok-text="是" cancel-text="否"
            @confirm="deleteById(record.id)">
            <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
          </a-popconfirm>
        </template></template>
    </s-tree-table>
    <!--    <detail ref="detail" />
    <add
      ref="add"
      @success="
        () => {
          $refs.table.refresh()
        }
      "
    />
    <update
      ref="update"
      @success="
        () => {
          $refs.table.refresh()
        }
      "
    />-->
    <s-dynamic-form-dialog ref="add" v-model="itemFormValue" title="添加" form-id="1ff8f3c512c34a3dbd5396459cb90eea"
      @save="addItem"></s-dynamic-form-dialog>
    <s-dynamic-form-dialog ref="detail" v-model="itemFormValue" disabled form-id="1ff8f3c512c34a3dbd5396459cb90eea">
      <s-form-item label="创建人">
        <s-input v-model="itemFormValue.createByAccount" disabled />
      </s-form-item>
      <s-form-item label="创建时间">
        <s-input v-model="itemFormValue.createDate" disabled />
      </s-form-item>
      <s-form-item label="修改人">
        <s-input v-model="itemFormValue.updateByAccount" disabled />
      </s-form-item>
      <s-form-item label="修改时间">
        <s-input v-model="itemFormValue.updateDate" disabled />
      </s-form-item>
    </s-dynamic-form-dialog>
    <s-dynamic-form-dialog ref="update" v-model="itemFormValue" title="编辑" form-id="1ff8f3c512c34a3dbd5396459cb90eea"
      @save="updateItem">
    </s-dynamic-form-dialog>
  </a-card>
</template>

<script>
const columns = [
  {
    title: '部门名称',
    width: 400,
    dataIndex: 'text'
  },
  {
    title: '联系人',
    dataIndex: 'contactPeople',
    width: 150,
    ellipsis: true
  },
  {
    title: '联系人电话',
    dataIndex: 'contactPhone',
    width: 200,
    ellipsis: true
  },
  {
    title: '联系人邮箱',
    dataIndex: 'contactEmail',
    width: 200,
    ellipsis: true
  },
  // {
  //   title: '排序号',
  //   dataIndex: 'orderNum',
  //   width: 100,
  //   ellipsis: true
  // },
  // {
  //   title: '创建人',
  //   dataIndex: 'createByAccount',
  //   ellipsis: true,
  //   width: 200
  // },
  // {
  //   title: '创建时间',
  //   dataIndex: 'createDate',
  //   ellipsis: true,
  //   width: 200
  // },
  // {
  //   title: '修改人',
  //   dataIndex: 'updateByAccount',
  //   ellipsis: true,
  //   width: 200
  // },
  // {
  //   title: '修改时间',
  //   dataIndex: 'updateDate',
  //   ellipsis: true,
  //   width: 200
  // },
  {
    fixed: 'right',
    title: '操作',
    key: 'action',
    width: 300
  }
]
// import Detail from './detail/index.vue'
// import Add from './add/index.vue'
// import Update from './update/index.vue'
export default {
  name: 'QueryList',
  // components: { Detail, Add, Update },
  data() {
    return {
      columns: columns,
      itemFormValue: {}
    }
  },
  authorize: '/realm/dept/permissionList',
  methods: {
    addItem(values, fullValue, dialog) {
      this.$api
        .PUT('/realm/dept/insert', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    updateItem(values, fullValue, dialog) {
      values.id = fullValue.id
      this.$api
        .PUT('/realm/dept/update', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    detail(id, ref) {
      const that = this
      ref.init((dialog) => {
        that.$loading(true)
        that.$api
          .GET('/realm/dept/selectOneById', { id: id })
          .then((res) => {
            that.$loading(false)
            if (!res.data) {
              that.$message.warn('数据不存在')
            } else {
              that.itemFormValue = res.data
              dialog.open()
            }
          })
          .catch(() => {
            that.$loading(false)
          })
      })
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/realm/dept/delete', { id: id })
        .then(() => {
          this.$loading(false)
          this.$refs.table.refresh()
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
